<template>
  <div class="login">
    <img class="login_image" src="../../public/image/login.jpg" />
    <el-form
      :model="login_Form"
      :rules="rules"
      ref="login_Form"
      label-width="100px"
      class="login_form"
    >
      <el-form-item label="用户名：" prop="username">
        <el-input v-model="login_Form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="login_Form.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="login_btn" type="primary" @click="onLogin()">登录</el-button>
        <el-button  @click="outLogin()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      login_Form: {},
      rules: {
        username: [
          { required: true, message: "请输入用户名！", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码！", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onLogin() {
      this.$refs['login_Form'].validate((valid) => {
          if (valid) {
            localStorage.setItem("usr",this.login_Form.username);
            this.$router.push("/student");
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    outLogin() {
        this.$refs['login_Form'].resetFields();
      }
  },
  // computed: {
  //   username:function(state){
  //     if(state.username==''){
  //       this.$store.dispatch('FLASH_USER');
  //     }
  //     return state.username
  //   }
  // },
};
</script>
<style scoped>
.login_image {
  width: 500px;
  height: 320px;
  margin-left: 200px;
  margin-top: 10px;
  float: left;
}
.login_form {
  width: 290px;
  height: 250px;
  float: right;
  margin-top: 80px;
  margin-right: 250px;
}
.login_btn {
  margin-right: 40px;
}
.login::before,
.login::after {
  content: "";
  display: block;
  clear: both;
}
</style>